@--color-primary: #18a058;
@--color-primary-hover: #36ad6a;
@--color-success: #63e2b7;
@--color-warning: #f0a020;
@--color-warning-hover: #fcb040;
@--color-danger: #d03050;
@--color-danger-hover: #de576d;
@--color-info: #2080f0;
@--color-info-hover: #4098fc;
@--color-text-primary: #ffffff;
@--color-text-regular: #dedede;
@--color-text-secondary: #d9d9d9;
@--color-text-placeholder: #bfbfbf;
@--background-color-base: #18181c;
@--border-color-light: #e4e4e4;

:root {
    --base: 255, 255, 255;
    --base-reverse: 0, 0, 0;
    --color-primary: #18a058;
    --color-primary-hover: #36ad6a;
    --color-success: #63e2b7;
    --color-warning: #f0a020;
    --color-warning-hover: #fcb040;
    --color-danger: #d03050;
    --color-danger-hover: #de576d;
    --color-info: #2080f0;
    --color-info-hover: #4098fc;
    --color-text-primary: #ffffff;
    --color-text-regular: #dedede;
    --color-text-secondary: #d9d9d9;
    --color-text-placeholder: #bfbfbf;
    --background-color-base: #18181c;
    --border-color-light: #e4e4e4;
    --text-color-disabled: rgba(255, 255, 255, 0.05);
    --color-base: rgba(var(--base), 0.8);
    --el-fill-color-blank: transparent;
    --el-text-color-primary: rgba(var(--base), 0.6);
    --el-text-color-regular: var(--color-base);
    --el-color-primary:var(--color-primary);
    --el-border-color-hover:var(--color-primary);
    --el-border-color-light:  rgba(var(--base), 0.1);
    --el-color-primary-light-3: var(--color-primary-hover);
}

html[data-theme='light'] {
    --base: 0, 0, 0;
    --base-reverse: 255, 255, 255;
    --background-color-base: #fff;
    --text-color-disabled: rgba(255, 255, 255, 0.38);
    --color-base: var(--background-color-base);
    --el-fill-color-blank: transparent;
    --el-text-color-primary: rgba(var(--base), 0.6);
    --el-text-color-regular: var(--color-base);
    --color-text-regular: #333;
    --el-color-info: #333;
}

body{
    background: var(--background-color-base); 
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: rgba(var(--base), 0.05);
    }
    ::-webkit-scrollbar-track {
        border-radius: 0;
        background-color: var(--background-color-base);
        box-shadow: 0 0 6px rgba(var(--base), 0.1) inset;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: var(--color-primary);
        &:hover {
            background-color: var(--color-primary-hover);
        }
    }
    .el-loading-mask {
        background-color: rgba(var(--base-reverse), 0.5);
    }

    .el-empty {
        opacity: 0.5;
    }
    .el-header{
        box-shadow: 0 0 5px rgba(var(--base), 0.05);
    }
    .el-message-box__wrapper .el-message-box {
        border-color: rgba(var(--base), 0.1);
        background-color: @--background-color-base;
    }
    .el-select {
        .el-input__inner {
            background-color: var(--background-color-base);
            color: rgba(var(--base), 0.8);
            // &:hover {
            //     border-color: rgba(var(--base), 0.15);
            // }
            // &:focus {
            //     border-color: var(--color-primary);
            // }
        }

        &-dropdown {
            background-color: var(--background-color-base);
            &__item {
                color: rgba(var(--base), 0.8);
                &.selected {
                    color: var(--color-primary);
                }
            }
            .el-select-dropdown__item.hover,
            .el-select-dropdown__item:hover {
                background-color: rgba(var(--base), 0.15);
            }
            &.el-popper[x-placement^='bottom'] .popper__arrow {
                border-bottom-color: rgba(var(--base), 0.15);
                &:after {
                    border-bottom-color: var(--background-color-base);
                }
            }
        }
    }
    .el-input {
        &.is-disabled .el-input__inner {
            background-color: var(--text-color-disabled);
            border-color: transparent;
        }
    }
    .el-textarea {
        &__inner {
            background-color: var(--background-color-base);
            border: 1px solid rgba(var(--base), 0.1);
            color: rgba(var(--base), 0.8);
            &:hover,
            &:focus {
                border-color: var(--color-primary);
            }
        }
    }
    .el-input__inner {
        background-color: var(--backgroundColor);
        color: rgba(var(--base), .9);
        border-color: var(--inputBorderColor);
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-primary);
    }
    .el-radio-button__inner:hover {
        color: var(--color-primary);
    }

    .el-table {
        background-color: transparent;
        color: rgba(var(--base), 0.8);
        &__expanded-cell,
        tr {
            background-color: transparent;
        }
        th.el-table__cell {
            background-color: rgba(var(--base), 0.08);
        }
        tr.el-table__row--striped td.el-table__cell {
            background-color: rgba(var(--base), 0.03);
        }
        &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
            background-color: rgba(var(--base), 0.03);
        }
        &--border,
        &--group,
        td.el-table__cell,
        th.el-table__cell.is-leaf {
            border-color: rgba(var(--base), 0.05);
        }
        &--border::after,
        &--group::after,
        &::before {
            background-color: rgba(var(--base), 0.05);
        }
        &--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
            background-color: rgba(var(--base), 0.05);
        }
        .el-table__cell {
            color: rgba(var(--base), 0.8);
        }
        .el-table__inner-wrapper::before{
           background-color: var(--text-color-disabled);
        }
    }
    .el-pagination {
        &.is-background .el-pager li:not(.disabled) {
            &.active {
                background-color: var(--color-primary);
                color: #fff;
            }
            &:hover {
                color: var(--color-primary);
            }
        }
        &.is-background .btn-next,
        &.is-background .btn-prev,
        &.is-background .el-pager li {
            background-color: transparent;
        }
    }

    .el-tabs {
        .el-tabs--card > .el-tabs__header .el-tabs__nav,
        .el-tabs--card > .el-tabs__header .el-tabs__item,
        .el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
        .el-tabs--card > .el-tabs__header {
            border-color: rgba(var(--base), 0.1);
        }

        .el-tabs__item {
            color: var(--color-text-regular);
        }
        .el-tabs__item.is-active,
        .el-tabs__item:hover {
            color: var(--color-primary);
        }

        .el-tabs__active-bar {
            background-color: var(--color-primary);
        }
    }

    .el-menu{
        background: var(--background-color-base); 
        border-right-color: rgba(var(--base), 0.1);
        .el-menu-item{
            color: var(--color-text-regular);
            transition-duration: 0.3s;
            border-radius: 0 30px 30px 0;
            & + .el-menu-item{
                margin-top: 2px;
            }
            &:hover,&.is-active{
                background-color: var(--color-primary);
                color: var(--color-text-primary);
            }
        }
    }

    .el-link.el-link--info{
        --el-link-text-color: rgba(var(--base), 0.8);
        --el-link-hover-text-color: var(--color-primary);
        text-decoration: none;
        &.is-underline:hover:after{
            border-color: var(--el-link-hover-text-color);
        }
    }
    .el-input-group{
        --el-border-color: rgba(var(--base), 0.1);
        --el-text-color-disabled: rgba(var(--base), 0.08);
    }
    
    .el-input-group__append, .el-input-group__prepend{
        background-color: transparent;
    }

    .el-switch__core{
        --el-switch-off-color: var(--color-primary);
        --el-switch-on-color: var(--color-text-placeholder);
    }
}

